<template>
  <el-select
    v-model="innerValue"
    multiple
    filterable
    collapse-tags
    placeholder="请选择权限"
    class="permission-select"
  >
    <el-option
      v-for="p in options"
      :key="p"
      :label="p"
      :value="p"
    />
  </el-select>
</template>

<script setup lang="ts">
import { computed } from 'vue'

const props = defineProps<{
  modelValue: string[]
  availablePermissions?: string[]
}>()

const emit = defineEmits<{
  (e: 'update:modelValue', v: string[]): void
}>()

const fallback = [
  '允许评论',
  '允许点赞',
  '审核资料',
  '提问',
  '回答问题',
  '上传文件',
  '访问直播',
  '访问高级课程',
]

const options = computed(() => props.availablePermissions && props.availablePermissions.length ? props.availablePermissions : fallback)

const innerValue = computed({
  get: () => props.modelValue,
  set: (v: string[]) => emit('update:modelValue', v)
})
</script>

<style scoped>
.permission-select { min-width: 320px; }
</style>
